<template>
	<div class="edit-popup">
		<popup ref="popupRef" title="从属设备" :async="true" width="1350px" :clickModalClose="true" @confirm="handleSubmit"
			@close="handleClose">
			<el-form class="mb-[-16px]" :model="formData" inline>
				<el-form-item label="物料名称">
					<el-input v-model="formData.title" class="w-40" size="small" clearable />
				</el-form-item>
				<el-form-item label="物料编码">
					<el-input v-model="formData.no" class="w-40" size="small" clearable />
				</el-form-item>
				<!-- <el-form-item label="物料分类">
					<el-tree-select class="w-40" size="small" default-expand-all :check-strictly="true"
						v-model="formData.cate_id" :data="options.jobss" :props="{ value: 'id', label: 'name'}">
					</el-tree-select>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="resetPage" size="small">查询</el-button>
					<el-button @click="resetParams" size="small">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="mt-4">
				<el-card v-loading="pager.loading" class="!border-none" shadow="never">
					<mtable :data="pager.lists" :type="typeTable" :list="options.tableTile" :bill="false"
						:operation="false" :selection="false"  :tableheight="'340'" @handleAdds="handleAdds"
						@onSelectionchange="onSelectionchange">
						<template #tool="{item}">
							<el-table-column v-if="item.display==1" sortable :label="item.name" show-overflow-tooltip
								:prop="item.value" :width="item.width">
								<template #default="{ row }">
									<div v-if="item.name=='分类'">
										{{row.cate_name[0].name}}
									</div>
									<div v-if="item.name=='附件'&&row.product_image_name.length!=0">
										<el-button type="primary" plain @click="onenclosure(row.product_image_name)" size="small">
											查看
										</el-button>
									</div>
									<div v-if="item.name=='图片'&&row.certificate_image">
										<div class="demo-image__preview">
											<el-image class="imgTable" :src="row.certificate_image[0]"
												:preview-src-list="row.certificate_image" :initial-index="0">
												<template #error>
													<div class="image-slot"></div>
												</template>
											</el-image>
										</div>
									</div>
								</template>
							</el-table-column>
						</template>
					</mtable>
				</el-card>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</popup>
		<EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getOptions"
			@close="showTable=false" />
		<enclosure v-if="enclosureShow" ref="enclosureRef" @success="getLists" @close="enclosureShow = false" />
	</div>
</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		getCommonFieldDisplay
	} from '@/api/tools/code'
	import {
		adminLists
	} from '@/api/materials/product'
	import enclosure from '@/components/enclosure/index.vue'
	import {
		jobsLists
	} from '@/api/org/post'
	import mtable from '@/components/table/index.vue'
	import {
		usePaging
	} from '@/hooks/usePaging'
	import {
		adminListssmaterials
	} from '@/api/materials/list'
	import EdittablePopup from '@/components/settable/index.vue'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef < FormInstance > ()
	const enclosureRef = shallowRef < InstanceType < typeof enclosure >> ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const tableref = shallowRef < InstanceType < typeof Popup >> ()
	const editRefs = shallowRef < InstanceType < typeof EdittablePopup >> ()
	const enclosureShow = ref(false)
	const mode = ref('add')
	const showTable = ref(false)
	// 表单数据
	const formData = reactive({
		title: '',
		no: '',
		cate_id: '',
		is_slave: 1
	})

	const formRules = reactive({
		title: [{
			required: true,
			message: '请输入计量单位',
			trigger: ['blur']
		}],
		name: [{
			required: true,
			message: '请输入名称',
			trigger: ['blur']
		}],
		role_id: [{
			required: true,
			message: '请选择角色',
			trigger: ['blur']
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur']
		}] as any[],
		password_confirm: [{
			required: true,
			message: '请输入确认密码',
			trigger: ['blur']
		}] as any[]
	})
	const onenclosure = async(val:any)=>{
		enclosureShow.value = true
		await nextTick()
		enclosureRef.value?.open('add')
		enclosureRef.value?.setFormData(val)
	}
	const {
		pager,
		getLists,
		resetParams,
		resetPage
	} = usePaging({
		fetchFun: adminLists,
		params: formData
	})
	const handleAdds = async () => {
		showTable.value = true
		await nextTick()
		editRefs.value?.open('add')
	}
	const dataList = ref([])
	const onSelectionchange = (val: any) => {
		dataList.value = val
	}
	const typeTable = ref('product_slave')

	const options = reactive({
		role: [] as any[],
		dept: [] as any[],
		jobs: [] as any[],
		jobss: [] as any[],
		tableTile: [] as any[]
	})

	const getOptions = () => {
		getCommonFieldDisplay({
			type: typeTable.value
		}).then((data: any) => {
			options.tableTile = data
		})
		adminListssmaterials({}).then((data: any) => {
			options.jobss = data
		})
		jobsLists({
			page_type: 0
		}).then((data: any) => {
			options.jobs = data.lists
		})
	}

	const handleSubmit = async () => {
		await formRef.value?.validate()
		// mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
		popupRef.value?.close()
		emit('success', dataList.value)
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data: Record < any, any > ) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
		formRules.password = []
		formRules.password_confirm = []
	}

	const handleClose = () => {
		emit('close')
	}

	getOptions()
	getLists()
	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	::v-deep .el-card__body {
		padding: 0px;
	}
</style>
